<template>
	<view class="pageContent">
		<u-navbar title="购物车" bgColor="#D9EDD4" placeholder>
			<u-icon slot="left" size="30" @click="gonavigate('/pages/news/news')"
				name="/static/images/news.png"></u-icon>
		</u-navbar>

		<view class="bgBox">
			<view class="goodItem" v-if="goodData.length>0">
				<view class="carGoodBox">
					<view class="good-item" v-for="(item,index) in goodData" :key="index">
						<!-- 左边 -->
						<u-checkbox-group class="carGoodLeft">
							<u-checkbox active-color="green" :checked="item.isChoic?true:false" size="18"
								@change="goClick(item,$event)"></u-checkbox>
						</u-checkbox-group>
						<!-- 右边 -->
						<view class="carGoodRight">
							<view class="carGoodTop" @click="goToDetail(item)">
								<u--image
									:src="item.travel.content.slice(item.travel.content.indexOf(']')+2,item.travel.content.indexOf('￥')+5)"
									mode="aspectFill" width="100" height="100" radius='10'></u--image>
								<view class="goodIntroduce">
									<view class="goodDetail">{{item.travel.summary}}</view>
									<view class="goodPrice">石友价：{{item.price}}万</view>
								</view>
							</view>

							<view class="carGoodBottom">
								<text class="want-buy">10人想买</text>
								<view class="carGoodBottom-left">
									<view class="find-same"><text class="find-same-text" @click="goDel(item)">删除</text>
									</view>
									<view class="soon-buy" @click="gonavigate('/pages/account/account?travelId='+item.travelId)">
										<text class="soon-buy-text">立即购买</text>
									</view>
								</view>
							</view>
						</view>
					</view>
				</view>
			</view>
			
			<!-- 购物车为空 -->
			<view v-else>
				<view class="empty-box">
					<u-empty icon="/static/images/hole.png" icon-size="150" mode="car" text-color="#038B00"></u-empty>
					<navigator class="coreshop-btn" url="/pages/index/default/default" open-type="switchTab">随便逛逛
					</navigator>
				</view>
			</view>
			
			<card cardName="猜你喜欢"></card>
			<goodList></goodList>

			<view class="white-box"></view>

			<view class="pay-all">
				<view class="payAll-left">
					<u-checkbox-group>
						<u-checkbox size="20" @change="choiceAll" :checked="chickAll" active-color="green"></u-checkbox>
					</u-checkbox-group>
					<view class="check-all">全选</view>
				</view>

				<view class="payAll-right">
					<view class="right-text">
						<view class="payAll-money">总计：{{totalPrice}}万</view>
						<!-- <view class="payAll-coupon">优惠：0.2万</view> -->
					</view>

					<view class="right-btn" @click="gonavigate('/pages/account/accountAll')">结算</view>
				</view>
			</view>
		</view>

		<!-- 购物车为空 -->
		<!-- <view v-else>
			<view class="empty-box">
				<u-empty icon="/static/images/hole.png" icon-size="150" mode="car" text-color="#038B00"></u-empty>
				<navigator class="coreshop-btn" url="/pages/index/default/default" open-type="switchTab">随便逛逛
				</navigator>
			</view>
		</view> -->

	</view>
</template>

<script>
	import card from "@/components/index/card.vue"
	import goodList from "@/components/index/goodList.vue"
	export default {
		data() {
			return {
				// 数据库里的is_choic
				// isChoic: 0,
				// 全选
				chickAll: false,
				// 购物车商品
				goodData: [],
			}
		},
		components: {
			card,
			goodList
		},
		onLoad() {
			this.getShopData();
		},
		methods: {
			// 全选
			choiceAll(e) {
				this.chickAll = e;
				if (e) {
					let len = this.goodData.length;
					for (let i = 0; i < len; i++) {
						this.goodData[i].isChoic = 1
					}
				} else {
					let len = this.goodData.length;
					for (let i = 0; i < len; i++) {
						this.goodData[i].isChoic = 0
					}
				}
			},
			// 跳转页面
			gonavigate(pageUrl) {
				uni.navigateTo({
					//保留当前页面，跳转到应用内的某个页面
					url: pageUrl
				})
			},
			// 购物车数据
			getShopData() {
				let currentUserId = uni.getStorageSync('userId')
				uni.request({
					url: "http://localhost:3000/order/getOrdersByuserId",
					data: {
						userId: currentUserId,
					},
					success: (res) => {
						if (res?.data?.code == 200) {
							for(let i=0;i<res.data.data.length;i++){
								let status = res.data.data[i].status
								if(status==0){
									this.goodData.push(res.data.data[i])
								}
								else{}
							}
						}
					},
					fail: (res) => {
						this.$u.toast(res?.data?.msg)
					}
				})
			},

			// 删除购物车商品
			goDel(item) {
				uni.request({
					url: 'http://localhost:3000/order/delete',
					data: {
						orderId: item.orderId
					},
					success: (res) => {
						if (res?.data?.code == 200) {
							this.$u.toast(res?.data?.data?.message);
						} else {
							this.$u.toast(res?.data?.data?.message);
						}
					},
					fail: (res) => {
						this.$u.toast(res?.data?.msg);
					}
				})
				this.isChoic = 0;
				this.updateOrder(item);
			},
			//跳转到商品详情页面
			goToDetail(item) {
				uni.navigateTo({
					url: "/pages/goods/detail?travelId=" + item.travelId,
				})
			},
			// 获取checkbox的true/false
			goClick(item, $event) {
				if ($event == true) {
					item.isChoic = 1;
				} else {
					item.isChoic = 0;
					this.chickAll = false
				}
				this.updateOrder(item);
				
				let allChoice = this.goodData.every(item => item.isChoic == 1);

				if (allChoice) {
				  this.chickAll = true
				} else {
				 this.chickAll = false
				}
			},
			// 更新isChoic
			updateOrder(item){
				uni.request({
					url: 'http://localhost:3000/order/updateByUser',
					method: "POST",
					data: {
						orderId: item.orderId,
						// 未付款
						status: 0,
						// 是否选中
						isChoic: item.isChoic,
					},
					success: (res) => {
						if (res?.data?.code == 200) {
							
						} else {
							this.$u.toast(res.data);
						}
					},
					fail: (res) => {
						console.log('失败');
						this.$u.toast(res?.data?.msg);
					}
				})
			},
		},
		computed: {
			totalPrice() {
				let totalPrice = 0;
				this.goodData.map(item => {
					item.isChoic ? totalPrice += item.price : totalPrice += 0
				})
				return totalPrice
			}
		}
	}
</script>

<style lang="scss" scoped>
	/deep/.u-navbar__content__title {
		font-weight: 700;
	}

	.pageContent {
		.goodItem {
			margin: $uni-spacing-row-lg;

			.carGoodBox {
				.good-item {
					display: flex;
					align-items: center;
					background-color: $gs-jpBg;
					border-radius: 10px;
					margin-bottom: $uni-spacing-col-lg;
				}

				.carGoodLeft {
					margin-left: $uni-spacing-row-sm;
				}

				.carGoodRight {
					width: 100%;

					.carGoodTop {
						display: flex;
						align-items: center;
						padding-top: $uni-spacing-row-lg;

						.goodIntroduce {
							padding: 0 $uni-spacing-row-base;

							.goodDetail {
								overflow: hidden;
								text-overflow: ellipsis;
								display: -webkit-box;
								-webkit-box-orient: vertical;
								-webkit-line-clamp: 2;
							}

							.goodPrice {
								font-size: $uni-font-size-base;
								color: $gs-color-red;
								padding: $uni-spacing-row-base 0;
							}
						}
					}

					.carGoodBottom {
						display: flex;
						align-items: center;
						justify-content: space-between;
						padding: $uni-spacing-row-base 0;

						.want-buy {
							font-size: $uni-font-size-sm;
						}

						.carGoodBottom-left {
							display: flex;
							align-items: center;
							padding: 0 $uni-spacing-row-lg;

							.find-same {
								border: solid 1px;
								border-radius: 20px;
								padding: 0 $uni-spacing-row-base;
								margin: 0 $uni-spacing-row-sm;
								line-height: 20px;

								.find-same-text {
									font-size: $uni-font-size-base;
								}
							}

							.soon-buy {
								border-radius: 20px;
								padding: 1px $uni-spacing-row-base;
								margin: 0 $uni-spacing-row-base;
								background-color: $gs-color-green;
								line-height: 20px;

								.soon-buy-text {
									font-size: $uni-font-size-base;
									color: $uni-text-color-inverse;
								}
							}
						}

					}
				}
			}
		}

		.white-box {
			width: 100%;
			height: 60px;
		}

		.pay-all {
			width: 100%;
			background-color: $gs-jpBg;
			position: fixed;
			bottom: 60px;
			right: 0;
			display: flex;
			align-items: center;
			justify-content: space-between;

			.payAll-left {
				display: flex;
				align-items: center;
				padding: $uni-spacing-col-base $uni-spacing-row-lg;

				.check-all {
					color: $uni-text-color;
					font-size: $uni-font-size-base;
				}
			}

			.payAll-right {
				display: flex;
				align-items: center;
				width: 60%;

				.right-text {
					display: flex;
					flex-direction: column;
					margin: 0 $uni-spacing-row-base;
					padding: $uni-spacing-col-base 0;
					white-space: nowrap;

					.payAll-money {
						color: $gs-color-red;
						font-size: $uni-font-size-base;
					}

					.payAll-coupon {
						color: $uni-text-color;
						font-size: $uni-font-size-sm;
						padding: $uni-spacing-col-sm 0;
					}
				}

				.right-btn {
					width: 50%;
					// height: 5;
					background-color: $gs-btn;
					color: $uni-text-color-inverse;
					font-size: $gs-font-lg;
					padding: 16.5px $uni-spacing-row-lg;
					text-align: center;
				}
			}
		}
	}


	.empty-box {
		display: flex;
		flex-direction: column;
		align-items: center;
		margin: 100px 0;

		.coreshop-btn {
			background-image: linear-gradient(120deg, #54af53 0%, #84ca8d 100%);
			font-size: $uni-font-size-base;
			border-radius: 12px;
			padding: $uni-spacing-col-sm $uni-spacing-row-lg;
			margin: $uni-spacing-col-lg 0;
			width: fit-content;
			color: $uni-bg-color-grey;
		}
	}
</style>